<template>
<div>
    <el-form-item :label="formLable">
        <a-cascader v-model="prop.data"
        :options="formCascade"
        :allowClear="false"
        :display-render="displayRender"
        @change="(value) => handleChange(value, prop)"
        />
    </el-form-item>
    <div v-for="item in prop.children" :key="item.propertyName" v-show="fieldVisible">
        <el-form-item :label="item.propertyName">
            <el-select v-model="item.default" placeholder="请选择" >
                <el-option
                  v-for="field in fieldList"
                  :key="field.name"
                  :label="field.alia"
                  :value="field.name">
                </el-option>
              </el-select>
        </el-form-item>
    </div>
</div>
</template>

<script>
import { getWorksheetDetail } from "@/api/worksheet";
export default {
    props:{
        formLable: String,
        formCascade: Array,
        prop: Object,
    },
    data(){
        return {
            fieldVisible: false,
            fieldList: [],
            oldWorksheetId: ''
        }
    },
    methods:{
        displayRender({ labels }) {
            return labels[labels.length - 1];
        },
        async handleChange(key, prop) {
            if(!key) return
            let worksheetId = key[key.length - 1]
            prop.default = worksheetId
            let detail = await getWorksheetDetail(worksheetId)
            this.fieldVisible = true
            this.fieldList = detail?.fields || []
        },
    },
    watch:{
         async 'prop.default'() {
            let worksheetId = this.prop.default
            this.oldWorksheetId = this.prop.default
            if(worksheetId !== "" && worksheetId) {
                let detail = await getWorksheetDetail(worksheetId)
                this.fieldVisible = true
                this.fieldList = detail?.fields || []
            } else {
                this.fieldVisible = false
            }
        }
    },
    async mounted(){
        let worksheetId = this.prop.default
        this.oldWorksheetId = this.prop.default
        if(worksheetId !== "" && worksheetId) {
            let detail = await getWorksheetDetail(worksheetId)
            this.fieldVisible = true
            this.fieldList = detail?.fields || []
        } else {
            this.fieldVisible = false
        }
    }
}
</script>

<style>

</style>